<html>

	<head>
		<title></title>
	</head>

	<body>
		<!--<div id='outer' style='margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
			<div id="inner" style='margin-left:20px; width: 50px;height:50px; background: green;'></div>
		</div>
		<p id='click'>click me</p>
		<script>
			document.getElementById('click').onclick = function(event) {
				console.dir(event.target);
				console.dir(event);
			}
			var click = document.getElementById('click');
			click.onclick = function() {
				alert('you click the first function');
			};
			click.onclick = function() {
				alert('you click the second function')
			}
		</script>-->
<!--
		<div id='outer' style='margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
			<div id="inner" style='margin-left:20px; width: 50px;height:50px; background: green;'></div>
		</div>
		<script>
			var click = document.getElementById('inner');
			click.addEventListener('click', function() {
				alert('click one');
			}, true);
			click.addEventListener('click', function() {
				alert('click two');
			}, true);
		</script>-->

		<div id='outer' style='margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
			<div id="inner" style='margin-left:20px; width: 50px;height:50px; background: green;'></div>
		</div>
		<!--<script>
			var click = document.getElementById('inner');
			var clickouter = document.getElementById('outer');
			click.addEventListener('click', function() {
				alert('inner show');
//				event.stopPropagation()
			}, false);
			clickouter.addEventListener('click', function() {
				alert('outer show');
			}, false);
		</script>-->

		<!--<script>
			var click = document.getElementById('inner');
			var clickouter = document.getElementById('outer');
			click.addEventListener('click', function() {
				alert('capture show');
			}, true);
			click.addEventListener('click', function() {
				alert('bubble show');
			}, false);
		</script>-->
		<script>
			var click = document.getElementById('inner');
			var clickouter = document.getElementById('outer');
			clickouter.addEventListener('click', function(event) {
				alert('inner show');
//				event.stopPropagation();
			}, true);//maopao
			click.addEventListener('click', function() {
				alert('outer show');
			}, false);//maopao
		</script>

	</body>

</html>